
<template>
  <div class="product-list">
    <ul class="product-container">
      <li v-for="item in goodsList" :key="item.id" @click="gotoDetail(item.id)">
        <img :src="item.list_pic_url" v-lazy="item.list_pic_url" alt="" />
        <div class="title van-ellipsis">{{ item.name }}</div>
        <div class="price">{{ item.retail_price | filterMoney }}</div>
      </li>
    </ul>
    <MyLoading v-if="$store.state.isShow"></MyLoading>
  </div>
</template>
<script>
import MyLoading from "@/components/MyLoading.vue";
export default {
  components: {
    MyLoading,
  },
  props: ["goodsList"],
  data() {
    return {
      //每页数量
      pageSize: 10,
      //总页数
      totalPages: 3,
      //当前页
      currentPage: 1,
    };
  },
  methods: {
    gotoDetail(id) {
      this.$router.push("/detail?gid=" + id);
    },
  },

  created() {},
};
</script>

<style lang="less" scoped>
.product-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // z-index: 1;
  li {
    width: 49%;
    margin-top: 10px;

    background-color: #fff;
    text-align: center;
    img {
      width: 100%;
    }
    .title {
      line-height: 20px;
    }
    .price {
      line-height: 30px;
    }
  }
}
.tips {
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #999;
}
</style>